<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" @click="add">新增</el-button>
				<el-button type="primary" size="small" @click="del">删除</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="tsakAllotTreeData" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="paramSetTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18" style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border stripe :data="tableData.dataList" style="width: 100%;height:480;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<el-table-column prop="rName" label="角色" width="120">
					</el-table-column>
					<el-table-column prop="taskType" label="权限类型" :formatter="tsakTypeCov" width="120">
					</el-table-column>
					<el-table-column prop="fromCar" label="遵循车辆档案" :formatter="formCarCov" width="120">
					</el-table-column>
					<el-table-column prop="uName" label="人员" width="120">
					</el-table-column>
					<el-table-column prop="areaName" label="一级区域" width="120">
					</el-table-column>
					<el-table-column prop="areaSecondName" label="二级区域" width="120">
					</el-table-column>
					<el-table-column prop="confType" label="处理任务车辆规则" :formatter="confTypeCov" width="150">
					</el-table-column>
					<el-table-column prop="confVal" label="处理任务车辆值" width="150">
					</el-table-column>
					<el-table-column label="操作" width="120" fixed="right">
						<template scope="scope">
							<el-tooltip class="item" effect="light" content="分配任务资源" placement="top" v-if="scope.row.confType=='3'">
								<el-button type="primary" size="mini" @click.native.prevent="Allot(scope.$index)">分配</el-button>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="任务资源分配" v-model="taskAllotShow" size="tiny">
			<el-form :model="taskFormData" ref="taskForm" :rules="taskFormRule" label-width="120px">
				<el-form-item label="角色" prop="roleId">
					<el-select size="small" v-model="taskFormData.roleId" @change="changeClick" placeholder="请选择" readonly>
						<el-option v-for="item in roleCombo" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="权限类型:" prop="taskType">
					<el-select size="small" v-model="taskFormData.taskType" placeholder="请选择" @change="taskTypeChange" readonly>
						<el-option label="管理" value="0"></el-option>
						<el-option label="处理" value="1"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="分配类型:" prop="confType" v-if="taskFormData.fromCar==0 && taskFormData.taskType==1">
					<el-select size="small" v-model="taskFormData.confType" @change="changeClicks" placeholder="请选择" readonly :disabled="confTypeChange" >
						<el-option label="全部" value="0"></el-option>
						<el-option label="尾号" value="1"></el-option>
						<el-option label="尾数" value="2"></el-option>
						<el-option label="vin" value="3"></el-option>
						<el-option label="车型" value="4"></el-option>
						<el-option label="剩余车辆" value="5"></el-option>
						<el-option label="上次进店" value="6"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="尾号值:" prop="confVal" v-if="taskFormData.confType==1&&taskFormData.fromCar==0 && taskFormData.taskType==1">
					<el-input size="small" v-model="taskFormData.confVal" placeholder="请输入内容 以逗号分隔">
					</el-input>
				</el-form-item>
				<el-form-item label="尾数值:" prop="confVal" v-if="taskFormData.confType==2&&taskFormData.fromCar==0 && taskFormData.taskType==1">
					<el-input size="small" v-model="taskFormData.confVal" placeholder="请输入内容 以逗号分隔">
					</el-input>
				</el-form-item>
				
				<!--<el-form-item label="遵循车辆档案:"
				              prop="fromCar"
				              v-if="taskFormData.taskType==1">
					<el-select size="small"
					           v-model="taskFormData.fromCar"
					           placeholder="请选择"
					           readonly>
						<el-option label="是"
						           value="1"></el-option>
						<el-option label="否"
						           value="0"></el-option>
					</el-select>
				</el-form-item>-->
				
				
				
				<div v-if="taskFormData.confType!=6 && taskFormData.taskType==1">
					<el-form-item label="一级区域" prop="oArea">
						<el-select size="small" v-model="taskFormData.oArea" @change="getAreaSecondCombo" placeholder="请选择">
							<el-option v-for="item in areaCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="二级区域" prop="oAreaSecond">
						<el-select size="small" v-model="taskFormData.oAreaSecond" @change="getStoreNameCombo" placeholder="请选择">
							<el-option v-for="item in areaSecondCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="门店" prop="storeCode"  >
						<el-select size="small"  v-model="taskFormData.storeCode" @change="setConfType" placeholder="请选择门店">
							<el-option v-for="item in storeNameCombo" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>	
				</div>
				<el-form-item label="人员" prop="uId" v-if="taskFormData.fromCar==0 && taskFormData.taskType==1">
					<el-select size="small" v-model="taskFormData.uId" placeholder="请选择" readonly>
						<el-option v-for="item in peopleCombo" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				
				
				<!--<el-col :span="24" v-if="taskFormData.confType=='3'&&taskFormData.fromCar==0 && taskFormData.taskType==1">
						<el-form-item label="vin:" >
												<el-upload :action="action" :data="upData" name="upExecl" auto-upload="upGo" :on-progress="process" :on-error="error" :on-success="success">
													<el-button size="small" type="primary">点击上传</el-button>
													<span slot="tip">只能上传xls/xlsx文件</span>
												</el-upload>
										</el-form-item>
						</el-col>-->
				<el-form-item label="新车自动分配:" prop="autoNewCar" v-if="taskFormData.fromCar==0 && taskFormData.taskType==1">
					<el-select size="small" v-model="taskFormData.autoNewCar" placeholder="请选择">
						<el-option label="否" value="0">
						</el-option>
						<el-option label="是" value="1">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="taskAllotShow = false">取 消</el-button>
				<el-button type="primary" @click="save">提 交</el-button>
			</div>
		</el-dialog>
		<el-dialog title="车辆分配" v-model="allotFormShow">
			<el-form :model="allotFormData" ref="allotForm" label-width="100px">

				<el-col :span="24">
					<el-form-item label="vin:">
						<el-upload :action="action2" :data="upData2" name="upExecl" :on-progress="process" :on-error="error" :on-success="success">
							<el-button size="small" type="primary">点击上传</el-button>
							<span slot="tip">只能上传xls/xlsx文件</span>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="allotFormShow = false">取 消</el-button>
				<!--<el-button type="primary" @click="saveAllot">提 交</el-button>-->
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				//				//shangchuan
				//				action: this.API_ROOT + "/crm/car/conf/restVin",
				//				upData: {
				//					id: '',
				//					uid: window.localStorage.getItem("uid"),
				//					token: window.localStorage.getItem("token")
				//				},
				//shangchuan
				action2: this.API_ROOT + "/crm/car/task/conf/restVin",
				upData2: {
					id: '',
					uid: window.localStorage.getItem("uid"),
					token: window.localStorage.getItem("token")
				},
				id: '',
				confType: '',
				//dialog显示
				taskAllotShow: false,
				//树数据
				tsakAllotTreeData: [],
				defaultProps: {
					children: 'child',
					label: 'name'
				},
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				//分页
				curPage: 1,
				page: this.page,
				//表格选择数据存入
				selectData: [],
				//form表单
				taskFormData: {
					roleId: '',
					taskType: '',
					fromCar: '0',
					uId: '',
					confType: '',
					confVal: '',
					autoNewCar: '',
					taskPCode: '',
					taskCCode: '',
					oAreaSecond: '', //二级区域
					oArea: '', //一级区域
					storeCode: '', //门店
				},
				//form表单初始化
				emptyFormData: {
					roleId: '',
					taskType: '',
					fromCar: '0',
					uId: '',
					confType: '',
					confVal: '',
					autoNewCar: '',
					taskPCode: '',
					taskCCode: '',
					oAreaSecond: '', //二级区域
					oArea: '', //一级区域
					storeCode: '', //门店
				},
				//form表单校验规则
				taskFormRule: {
					roleId: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					fromCar: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					taskType: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					uId: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					confType: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					autoNewCar: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					confVal: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					oArea: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					oAreaSecond: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				},
				//区域下拉值
				areaCombo: [],
				//二级区域
				areaSecondCombo: [],
				//门店
				storeNameCombo: [],
				//分配类型下拉锁定
				confTypeChange:false,
				//角色下拉数据
				roleCombo: [],
				//人员下拉数据
				peopleCombo: [],
				//查询任务类型
				curentCode: '',
				curentPcode: '',
				allotButton: false,
				allotFormShow: false,
				allotFormData: {
					allotRange: '',
				},

			}
		},
		methods: {
			//权限更改时情况之前选择的数据
			taskTypeChange: function() {
				if(this.$data.taskFormData.taskType == 0) {
					this.$data.taskFormData.oArea = "";
					this.$data.taskFormData.oAreaSecond = "";
					this.$data.taskFormData.uId = "";
					this.$data.taskFormData.confType = "";
					this.$data.taskFormData.confVal = "";
					this.$data.taskFormData.autoNewCar = "";
				}
			},
			//点击角色
			changeClick: function(data) {
				this.$data.taskFormData.uId = '';

				if(data != '') {
					debugger;
					this.userComboF(data);
				}
			},

			//新增的客服查询
			userComboF: function(roleIds) {
				//加载用户
				debugger;
				this.$http.get(this.API_ROOT + '/crm/config/userCombo', {
					params: {
						type: roleIds
					}
				}).then((response) => {
					// success callback
					this.$data.peopleCombo = response.data;
				}, (response) => {
					// error callback
				});
			},
			//选择分配类型
			changeClicks: function() {

			},
			//分页查询
			handleCurrentChange: function(curPage) {
				this.$data.curPage = curPage;
				this.query();
			},
			//复选框
			handleSelectionChange: function(val) {
				this.$data.selectData = val;
			},
			//树点击子节点查询
			handleNodeClick: function(data) {
				debugger;
				this.$data.curentCode = data.code;
				this.$data.curentPcode = data.pCode;
				this.query();
				this.$data.confTypeChange=false;//锁定分配类型

			},
			//分配车辆按钮
			Allot: function(index) {
				debugger;
				if(this.$data.tableData.dataList[index].confType != 3) {
					this.$confirm('确认要进行分配操作吗', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						debugger
						this.$http.get(this.API_ROOT + '/crm/car/task/conf/rest', {
							params: {
								id: this.$data.tableData.dataList[index].id,
							}
						}).then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.query();
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消此操作'
						});
					});
				} else {
					this.$data.allotButton = true;
					this.$data.allotFormShow = true;
					this.$data.id = this.$data.tableData.dataList[index].id;
					this.$data.upData2.id = this.$data.tableData.dataList[index].id;
					this.$data.allotFormData.allotRange = '';
					this.$data.confType = this.$data.tableData.dataList[index].confType;
				}

			},
			saveAllot: function() {
				debugger;
				this.$refs.allotForm.validate(function(valid) {
					if(valid) {
						this.$http.get(this.API_ROOT + '/crm/car/task/conf/rest', {
							params: {
								id: this.$data.id,
							}
						}).then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.$data.allotFormShow = false;
								this.query();
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})
					}
					return false;
				}.bind(this));

			},
			//查询
			query: function() {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/car/task/conf/page',
					params: {
						start: this.$data.curPage,
						limit: this.$data.page.pageSize,
						code: this.$data.curentCode,
					}
				}).then(function(resp) {
					this.$data.tableData.total = Number(resp.data.total);
					this.$data.tableData.dataList = resp.data.dataList;
				}, function(error) {
					//error
				})

			},
			//新增
			add: function() {
				this.$data.taskFormData = Object.assign(this.$data.taskFormData, this.$data.emptyFormData);
				this.$data.taskAllotShow = true;
			},
			//编辑
			edit: function() {

			},
			//删除
			del: function() {
				if(this.$data.selectData.length == 1) {
					this.$confirm('确认要删除这条数据吗？本操作会将其分配车辆一并删除！', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var data = this.$data.selectData[0].id;
						this.$http.get(this.API_ROOT + '/crm/car/task/conf/del', {
							params: {
								id: data,
							}
						}).then(function(resp) {
							// success callback
							//debugger;
							this.$message(resp.data.msg);
							this.query();
						}, function(error) {})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消此操作'
						});
					});
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//保存
			save: function() {
				debugger;
				this.$refs.taskForm.validate(function(valid) {
					if(valid) {
						this.$data.taskFormData.taskCCode = this.$data.curentCode;
						this.$data.taskFormData.taskPCode = this.$data.curentPcode;
						
						if(this.$data.taskFormData.confType==6){ // 如果按门店分配
							this.$data.taskFormData.oArea = ""; // 一级区域置空
							this.$data.taskFormData.oAreaSecond = ""; // 二级区域置空
							this.$data.taskFormData.storeCode = ""; // 门店置空
							this.$data.taskFormData.confVal = ""; // 尾号置空、尾数置空
						}

						this.$http.post(this.API_ROOT + '/crm/car/task/conf/kx/save', this.$data.taskFormData, {
							params: {}
						}).then(resp => {
							debugger;
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.$data.taskAllotShow = false;
								this.query();
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})
					}
					return false;
				}.bind(this));

			},
			//上传vin号
			process: function() {
				this.$data.loadingVue = this.$loading({
					fullscreen: true,
					text: "正在导入数据，请稍候"
				});
			},
			error: function(err, response) {
				this.$message.error(response.data.msg);
				this.$data.loadingVue.close();
			},
			success: function(response) {
				this.$data.loadingVue.close();

				if(response.success) {
					this.$message(response.msg);
				} else {
					this.$message.error(response.msg);
				}

			},
			//类型解析
			tsakTypeCov: function(row, column) {
				if(row.taskType == 0) return "管理";
				return "处理";
			},
			formCarCov: function(row, column) {
				if(row.fromCar == 0) return "否";
				return "是";
			},
			confTypeCov: function(row, column) {
				switch(row.confType) {
					case '0':
						return "全部";
					case '1':
						return "尾号";
					case '2':
						return "尾数";
					case '3':
						return "vin";
					case '5':
						return "剩余车辆";

				}
			},
			//获取二级区域
			getAreaSecondCombo: function() {
				//获取区域下拉
				this.$http.get(this.API_ROOT + '/base/dict/combo', {
					params: {
						group: this.$data.taskFormData.oArea
					}
				}).then((response) => {
					this.$data.areaSecondCombo = response.data;
				}, (response) => {});
			},
			//设置分配类型
			setConfType:function(){
				if(this.$data.curentPcode=="bxxb"){
				this.$data.taskFormData.confType="0";
				this.$data.confTypeChange=true;
				}
				else{
					this.$data.confTypeChange=false;
				}
			},
			//获取门店
			getStoreNameCombo: function() {
				this.$http.get(this.API_ROOT + '/rbac/dept/deptStoreArea', {
					params: {
						storeParea: this.$data.taskFormData.oArea,
						storeArea: this.$data.taskFormData.oAreaSecond,
						type:1,
					}
				}).then((response) => {
					this.$data.storeNameCombo = response.data.dataList;
				}, (response) => {});
			},
		},
		created: function() {
			//加载模块类型
			this.$http.get(this.API_ROOT + '/crm/config/roleCombo', {

				params: {
					//group: "msgType"
				}

			}).then((response) => {
				// success callback
				this.$data.roleCombo = response.data;
			}, (response) => {
				// error callback
			});
			//人员下拉
			this.$http.get(this.API_ROOT + '/rbac/user/allUser', {
				params: {
					//group: "msgType"
				}

			}).then((response) => {
				debugger;
				// success callback
				this.$data.peopleCombo = response.data.dataList;
			}, (response) => {
				// error callback
			});
			//获取树
			this.$http.get(this.API_ROOT + '/base/param/set/setTree', {
				params: {
					pCode: "task",
				}
			}).then((response) => {
				this.$data.tsakAllotTreeData = response.data.dataList;
			}, (response) => {});

			//获取区域下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "area"
				}
			}).then((response) => {
				this.$data.areaCombo = response.data;
			}, (response) => {});

		},
	}
</script>

<style>

</style>